<template>
  <el-dialog width="35%"
             :close-on-click-modal="false"
             v-model="show"
             :destroy-on-close="true"
             class="logisticsCom"
             title="Logistics information">
    <div class="content"
         v-loading="loading">
      <el-tabs v-model="activeTab">
        <el-tab-pane name="Logistics information"
                     label="Logistics information">
          <div class="tab-content">
            <div class="left">
              <el-row>
                <div class="title">Estimated Delivery Date</div>
                <div class="info">{{ orderInfo.delivery_date || '--' }}</div>
              </el-row>
              <el-row>
                <div class="title">Quantity</div>
                <div class="info">{{ orderInfo.quantity || 0 }}</div>
              </el-row>
              <el-row>
                <div class="title">Tracking ID</div>
                <div class="info black copy">
                  <span>{{ orderInfo.track_number || '--' }}</span>
                  <el-button :icon="CopyDocument"
                             link
                             @click="copy(orderInfo.track_number)"
                             v-if="orderInfo.track_number" />
                </div>
              </el-row>
              <el-row>
                <div class="title">Postcode</div>
                <div class="info black copy">
                  <span>{{ orderInfo.postal_code || '--' }}</span>
                  <el-button :icon="CopyDocument"
                             link
                             @click="copy(orderInfo.postal_code)"
                             v-if="orderInfo.postal_code"/>
                </div>
              </el-row>
            </div>
            <div class="right">
              <div class="title">Dynamic logistics data</div>
              <el-scrollbar>
                <el-timeline class="timeline">
                  <el-timeline-item v-for="(track, index) in trackInfo"
                                    :key="index"
                                    :timestamp="track.createtime"
                                    :hollow="index == 0"
                                    :type="index == 0 ? 'primary' : 'info'">
                    {{ track.location }}
                  </el-timeline-item>
                </el-timeline>
              </el-scrollbar>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { CopyDocument } from '@element-plus/icons-vue'
import { copy, timeFormat } from '/@/utils/common'
import { ref, watch } from 'vue'
import { getTrackInfo } from '/@/api/backend/customer/chat'
const show = ref(false)
const loading = ref(false)
const activeTab = ref('Logistics information')
const orderId = ref('')
const orderInfo = ref({} as anyObj)
const trackInfo = ref([] as any[])
 
const init = () => {
    getTrackInfos(orderId.value)
}

const getTrackInfos = (order_id: string) => {
    orderInfo.value = {}
    trackInfo.value = []
    loading.value = true
    getTrackInfo({ order_id }).then((res:any) => {
        if(res.code == 200) {
            const { order_info, track_info } = res.data
            orderInfo.value = order_info
            trackInfo.value = track_info
        }
    }).finally(() => {
        loading.value = false
    })
}

defineExpose({
    show,
    orderId
})

watch(
    () => show.value,
    (v) => {
        if(v){
            init()
        }
    }
)
</script>

<style lang="scss" scoped>
.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.content{
    &:deep(.el-tabs){
        .el-tabs__nav-wrap::after{
            display: none
        }
        .el-tabs__item{
            font-weight: bold;
            font-size: 15px;
        }
    }
    .tab-content{
        display: flex;
        color: #73767a;
        .left{
            .el-row{
                flex-wrap: wrap;
                & > div{
                    width: 100%;
                }
                .title{
                    line-height: 2;
                }
                .info{
                    line-height: 1.5;
                    @extend .ellipsis;
                }
            }
            .el-row + .el-row{
                margin-top: 15px;
            }
            .black{
                color: #333;
            }
            .copy{
                display: flex;
                align-items: center;
                span{
                    max-width: 80%;
                    @extend .ellipsis;
                }
            }
        }
        .right{
            .title{
                color: #73767a;
                line-height: 2;
            }
            &:deep(.el-timeline-item){
                padding-bottom: 40px;
                .el-timeline-item__content{
                    font-weight: bold;
                    font-size: 16px;
                }
                .el-timeline-item__timestamp{
                    color: #73767a;
                }
            }
            .timeline{
               max-height: 400px; 
            }
            &:deep(.el-scrollbar__view){
                padding: 10px;
            }
            .title + .el-scrollbar{
                margin-top: 4px;
                height: calc(100% - 32px);
            }
        }
        .left, .right{
            flex: 1;
        }
    }
}
</style>